<template>
  <div id="fashion">
    <el-carousel :interval="4000" type="card" height="350px" name="广告轮播">
      <el-carousel-item>
        <img class="img1" src="http://localhost:8088/static/banner1.jpg">
      </el-carousel-item>
      <el-carousel-item>
        <img class="img2" src="http://localhost:8088/static/banner2.jpg">
      </el-carousel-item>
      <el-carousel-item>
        <img class="img3" src="http://localhost:8088/static/banner3.jpg">
      </el-carousel-item>
      <el-carousel-item>
        <img class="img4" src="http://localhost:8088/static/banner4.jpg">
      </el-carousel-item>
    </el-carousel>
    <!--推荐歌单  -->
    <recommend-list></recommend-list>
    <div class="title title-mv">
      <span class="g-title mv">推荐MV</span>
      <el-row>
        <el-col :span="6">
          <img class="image" src="http://p4.music.126.net/0r0H97s-bM0lZzs6x0Ibeg==/18685100604133296.jpg?param=160y160">
          <div class="mv-name">Skin to skingSkin to</div>
          <div class="mv-author">鹿晗</div>
        </el-col>
        <el-col :span="6">
          <img class="image" src="http://p4.music.126.net/0r0H97s-bM0lZzs6x0Ibeg==/18685100604133296.jpg?param=160y160">
          <div class="mv-name">Skin to skingSkin to</div>
          <div class="mv-author">鹿晗</div>
        </el-col>
        <el-col :span="6">
          <img class="image" src="http://p3.music.126.net/DNlE0AUQdXci4XaQaxsHPQ==/18643319162278619.jpg?param=160y160">
          <div class="mv-name">Skin to skingSkin to</div>
          <div class="mv-author">鹿晗</div>
        </el-col>
        <el-col :span="6">
          <img class="image" src="http://p3.music.126.net/DNlE0AUQdXci4XaQaxsHPQ==/18643319162278619.jpg?param=160y160">
          <div class="mv-name">Skin to skingSkin to</div>
          <div class="mv-author">鹿晗</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import RecommendList from '@/components/public/RecommendList'
export default {
  name: 'Fashion',
  components: {
    RecommendList
  }
}
</script>

<style>
.title {
  width: 980px;
  display: block;
  margin: 0 auto;
}

.el-col-5 {
  width: 20%
}

.el-carousel {
  margin-top: 20px;
}

.el-carousel__item {
  margin-left: 100px;
}

.g-title {
  padding-left: 25px;
  color: #333;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
}

.g-title a {
  float: right;
  font-size: 14px;
  color: #666;
  margin-right: 60px;
}

.song-list {
  background: url("/static/aei.png") no-repeat left center;
  background-size: 20px 20px;
}

.title .el-row {
  margin-top: 10px;
}

.image {
  margin-top: 10px;
}

.fashionname {
  display: inline-block;
  font-size: 13px;
  width: 155px;
  height: 40px;
  margin-top: 10px;
  color: #000000;
  text-decoration: none;
}

.fashionname:hover {
  text-decoration: underline;
}

.title-mv {
  margin-top: 15px;
}

.mv {
  background: url("/static/aee.png") no-repeat left center;
  background-size: 20px 20px;
}

.mv-author {
  font-size: 12px;
  color: #666;
}

.mv-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>